<script setup>
import { ref } from "vue";

//example components
import NavbarDefault from "@/examples/navbars/NavbarDefault.vue";
import AllTires from "@/views/components/AllTires.vue";
import TabsSimple from "@/components/TabsSimple.vue";
import TireImages from "./components/TireImages.vue";
import MarkingAssets from "./components/MarkingAssets.vue";
import Gallery from "./components/Gallery.vue";
//images
import vueMkHeader from "@/assets/img/contactUs/header-bg.png";
import contentBg from "@/assets/img/products/badlands/bg.png";
let activeId = ref(1);

const changeTab = (id) => {
  activeId.value = id;
};
const tabList = [
  {
    id: 1,
    name: "TIRE IMAGES",
  },
  {
    id: 2,
    name: "MARKETING ASSETS",
  },
  {
    id: 3,
    name: "GALLERY",
  },
];
</script>

<template>
  <div class="position-sticky z-index-sticky top-0 w-100">
    <NavbarDefault transparent />
  </div>
  <Header>
    <div
      class="page-header min-vh-55"
      :style="`background-image: url(${vueMkHeader})`"
      loading="lazy"
    >
      <div class="container">
        <div class="row text-center">
          <div class="col-lg-12">
            <h1 class="text-f-ERASBD text-white text-title-size uppercase">
              RESOURCES
            </h1>
          </div>
        </div>
      </div>
    </div>
  </Header>
  <div :style="`background: url(${contentBg}) no-repeat bottom / contain`">
    <div class="container">
      <TabsSimple :tabList="tabList" @changeTab="changeTab" />
    </div>
    <TireImages v-if="activeId == 1" />
    <MarkingAssets v-else-if="activeId == 2" />
    <Gallery v-else />
  </div>

  <AllTires />
</template>

<style scoped>
@media (min-width: 1400px) {
  .container {
    max-width: 1496px !important;
  }
}
</style>